<template>
  <div class="ZYF-cms">
    <h3 class="h3">内容管理</h3>
    <a-form-model :model="form" layout="inline" :colon="false" id="tag_list">
      <a-form-model-item label="上传用户">
        <a-input v-model="form.name" placeholder="请输入上传用户" allowClear class="inputwidth"/>
      </a-form-model-item>
      <a-form-model-item label="内容分类">
        <a-select allow-clear v-model="form.typeId" placeholder="请选择内容分类" class="selectwidth" allowClear>
          <a-select-option :value="item.id" v-for="(item, index) in typeList">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否通过">
        <a-select allow-clear v-model="form.status" placeholder="请选择是否通过" class="selectwidth" allowClear>
          <a-select-option value="false">未通过</a-select-option>
          <a-select-option value="true">已通过</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="关键词">
        <a-input v-model="form.searchKey" placeholder="请输入标题、主要内容" allowClear class="inputwidth"/>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="getData">查询</a-button>
      </a-form-model-item>
      <a-form-model-item style="float: right;margin-right: 0;">
        <a-button type="primary" @click="showModal">上传</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="tableclass">
      <my-table style="min-height: 94%" :data-source="tabelData" :pagination="false" :row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}" :rowKey="(record) => record.id">
        <a-table-column key="id" title="序号" data-index="id" width="80px" align="center" :customRender="customRender"/>
        <a-table-column key="nickname" title="用户名" :ellipsis="true" data-index="nickname" align="center" width="150px"/>
        <a-table-column key="title" title="标题" :ellipsis="true" data-index="title" align="center"/>
        <a-table-column key="typeName" title="内容分类" :ellipsis="true" data-index="typeName" align="center"/>
        <a-table-column key="content" title="主要内容" :ellipsis="true" data-index="content" align="center"/>
        <a-table-column key="views" title="阅读量" data-index="views" align="center" width="100px"/>
        <a-table-column key="action" title="操作" data-index="action" align="center" width="200px">
          <template slot-scope="text, action">
            <a-button type="primary" size="small" v-if="action.status !== true" @click="passed(action)" style="margin-right: 10px">通过</a-button>
            <a-button type="danger" size="small" @click="delate(action)">删除</a-button>
          </template>
        </a-table-column>
      </my-table>

    </div>
    <div class="content-bottom clearfix">
      <div class="btn-class">
        <a-button type="primary" class="btn-style" @click="batchPass" :disabled="disabled">通过</a-button>
        <a-button type="danger" class="btn-style" @click="batchDelate" :disabled="disabled">删除</a-button>
      </div>
      <div class="page-box">
        <a-pagination :show-total="(total) => `共 ${total} 件设备`" v-model="form.currentPage" :total="total" :defaultPageSize="form.pageSize" :item-render="itemRender" @change="pagechangeFn"/>
      </div>
    </div>
    <a-modal v-model="addPop" width="50%" title="上传文件 " centered @cancel="() => ((formUp = {}), (fileList = []))" :maskClosable="false">
      <a-form-model :model="formUp" :label-col="labelColA" :wrapper-col="wrapperColA">
        <a-form-model-item label="内容分类">
          <a-select v-model="formUp.typeId" placeholder="请选择内容分类">
            <a-select-option :value="item.id" v-for="(item, index) in typeList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="标题">
          <a-input v-model="formUp.title" />
        </a-form-model-item>
        <a-form-model-item label="内容">
          <a-textarea v-model="formUp.content" :rows="4" />
        </a-form-model-item>
        <a-form-model-item label="是否为视频">
          <a-switch v-model="formUp.isVideo" />
        </a-form-model-item>
        <a-form-model-item label="上传文件">
          <a-upload :multiple="true" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
            <a-button type="primary" class="chooseFile">
              <a-icon type="upload" class="upIcon" />选择文件
            </a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>


      <template slot="footer">
        <a-button type="primary" class="chooseFile" :disabled="fileList.length === 0" :loading="uploading" @click="handleUpload">{{ uploading ? "提交中" : "提交" }}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "cms",
  data() {
    return {
      customRender: (text, record, index) =>
        `${(this.form.currentPage - 1) * this.form.pageSize + index + 1}`,
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      labelColA: { span: 5 },
      wrapperColA: { span: 15 },
      typeList: [],
      form: {
        currentPage: 1,
        pageSize: 10,
        name: "",
        typeId: undefined,
        searchKey: "",
        status:undefined,
      },
      status: [
        { name: "已通过", isNo: true },
        { name: "未通过", isNo: false },
      ],
      tabelData: [],
      total: 0,
      disabled: true,
      //通过数据
      pass: {
        ids: [],
        isAgree: true,
      },
      //表格选择
      selectedRowKeys: [],
      selectedData: [],
      //上传
      fileList: [],
      uploading: false,
      addPop: false,
      formUp: {
        name: "",
        typeId: "",
        title: "",
        content: "",
        isVideo: false,
      },
    };
  },
  methods: {
    //控制弹窗
    showModal() {
      this.addPop = true;
    },

    //上传方法
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },

    handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach((file, index) => {
        formData.append("files[" + index + "]", file);
      });
      formData.append("userId", this.$user.id);
      formData.append("typeId", this.formUp.typeId);
      formData.append("title", this.formUp.title);
      formData.append("content", this.formUp.content);
      formData.append("isVideo", this.formUp.isVideo);
      this.uploading = true;
      this.$api.UploadResources(formData).then((res) => {
          // console.log(res);
          if (res.status == 200) {
            this.addPop = false;
            this.uploading = false;
            this.formUp = {
              isVideo: false,
            };
            this.fileList = [];
            this.$message.info("上传成功!");
            this.getData();
          } else {
            this.$message.error("上传失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("请求超时");
        });
    },
    //多选操作
    onSelectChange(selectedRowKeys, data) {
      this.selectedRowKeys = selectedRowKeys;
      if (this.selectedRowKeys.length !== 0) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
      this.selectedData = data;
    },
    //批量通过
    batchPass() {
      this.pass.ids = this.selectedData.map((item) => {
        return item.id;
      });
      let then = this;
      this.$confirm({
        title:"是否批量通过所选项？",
        onOk(){
          then.$api.contentReview(then.pass).then((res) => {
            if (res.status == 200) {
              then.$message.success("审核成功");
              then.getData();
            } else {
              then.$message.error("审核失败");
            }
          });
        },

      })

    },
    //通过按钮
    passed(action) {
      this.pass.ids.push(action.id);
      let  then = this;
      this.$confirm({
        title:"是否确认通过？",
        onOk() {
          then.$api.contentReview(then.pass).then((res) => {
            if (res.status == 200) {
              then.$message.success("审核成功");
              then.getData();
            } else {
              then.$message.error("审核失败");
            }
          });
        },
        class: "delk",
      })

    },
    //批量删除
    batchDelate() {
      let _that = this;
      this.pass = this.selectedData.map((item) => {
        return item.id;
      });
      this.$confirm({
        title: "是否确认删除？",
        onOk() {
          _that.$api.batchDeleteContent(_that.pass).then((res) => {
            if (res.status == 200) {
              _that.$message.info("删除成功");
              _that.getData();
            }
          });
        },
        class: "delk",
      });
    },

    //删除按钮
    delate(action) {
      let _that = this;
      this.$confirm({
        title: "是否确认删除",
        onOk() {
          _that.$api.delateContent(action.id).then((res) => {
            if (res.status == 200) {
              _that.$message.info("删除成功");
              _that.getData();
            }
          });
        },
        class: "delk",
      });
    },
    //获取资源
    getData() {
      this.$api.getContentList(this.form).then((res) => {
        this.tabelData = res.data.data.records;
        // console.log(this.tabelData);
        this.total = res.data.data.total;
        this.selectedRowKeys = [];
        if (res.data.data.records.length == 0 && this.form.currentPage > 1) {
          this.form.currentPage -= 1;
          this.getData();
        }
      });
    },
    //查看分类
    getType() {
      this.$api.findType().then((res) => {
        this.typeList = res.data.data;
      });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      pageSize;
      this.form.currentPage = page;
      this.getData();
    },
  },
  mounted() {
    this.getType();
    this.getData();
  },
};
</script>

<style lang='scss' scoped>
#tag_list{
  width: 100%;
  margin-bottom: 14px;
}

//上传框
.li-child span {
  color: rgba(255, 255, 255, 0.7);
  padding: 0 12px;
}

.up-box {
  width: 80%;
  height: 100%;
  div {
    width: 100%;
    margin: 0 5px;
    display: flex;
    flex-wrap: wrap;
    img {
      margin: 5px 10px;
      width: 100px;
      height: 80px;
    }
  }
}
.ZYF-cms {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.a-col-class {
  margin-right: 18px;
}
.queryBtn {
  letter-spacing: 8px;
  background-color: #2c6a5f;
  border: 1px solid #2c6a5f;
}

/* 表格样式 */
.action-class {
  color: #207064;
  font-weight: 600;
  margin-right: 16px;
}
.action-class:hover {
  cursor: pointer;
  color: aquamarine;
}


.tableclass{
  min-height: calc(100% - 18%);
}

/* 分页 */
.btn-class {
  float: left;
}
.btn-style {
  font-weight: 600;
  letter-spacing: 5px;
  margin-right: 16px;
  height: auto;
}
.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  float: right;
}
</style>
